<template>
    <button class="button" @mouseenter="hover(true)" @mouseleave="hover(false)" v-wave="wave" @click="routerChange">
        <div :class="{'animate__animated animate__headShake':hovering}">   <!-- 需要标注animate__animated表示使用animate动画 -->
            <slot name="svg"></slot>
        </div>
        <div>
            <slot name="info"></slot>
        </div>
    </button>
</template>
<script lang="ts" setup>
import { ref } from "vue";
import {useRouter} from 'vue-router'

// let {wave,route} = defineProps(['wave','action','route'])
let {wave,route} = defineProps(['wave','action','route'])

const router = useRouter()

//路由跳转
function routerChange() {
    if(route.indexOf('/') === 0){       //如果传入url，则跳转
        router.push({
            path:route
        })
    }else{
        router.go(parseInt(route))       //如果传入字符串类型的数字，则前进/后退
    }
}

//导航按钮动效
let hovering = ref(false)
function hover(action: boolean) {
    hovering.value = action
}

</script>
<style lang="scss" scoped>
.button {
    padding: 10px 30px;
    border-radius: 10px;
    margin: 5px;
    display: flex;
    flex-direction: row;
    justify-content: center;
}

div{
    display: block;
}
</style>